<template>
	<view class="form">
		<u-form :model="form" ref="uForm">
			<span>
				<span style="color: #F43F3B;">*</span>
				<u-form-item label='姓名' placeholder="请输入姓名" prop="name">
					<u-input v-model="form.name" />
				</u-form-item>
			</span>

			<u-form-item label="身份证号" placeholder="请输入身份证号" prop="id">
				<u-input v-model="form.id" />
			</u-form-item>
			<span @click="show.sex=true">
				<u-form-item label="性别" prop="sex">
					<u-input @click="show.sex=true" v-model="form.sex" placeholder="请选择性别" type="select"  />
				</u-form-item>
			</span>
			<span @click="show.time=true">
				<u-form-item label="出生日期" prop="date">
					<u-input @click="show.time=true" v-model="form.date.result" placeholder="请选择出生日期" type="select"/>
				</u-form-item>
			</span>
			<u-form-item label="手机号" prop="phone"  placeholder="请输入手机号">
				<u-input v-model="form.phone" />
			</u-form-item>
			<u-button @click="submit">提交</u-button>
		</u-form>
		<u-calendar @change="changeTime()" v-model="show.time" mode="date"></u-calendar>
		<u-select @confirm="changeSex()" v-model="show.sex" :list="sex"></u-select>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: {
					time: false,
					sex: false
				},
				form: {
					name: null,
					id: null,
					sex: null,
					date: null,
					phone: null
				},
				sex: [{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					},
					{
						value: '3',
						label: '其它'
					},
				],
				rules: {
					name: [{
						required: true,
						type: "string",
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					id: [{
						required: true,
						type: "string",
						regexp: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
						min: 16,
						message: '请输入正确的身份证号',
						trigger: 'blur,change'
					}],
					sex: [{
						required: true,
						message: '请选择正确的性别',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					date: [{
						required: true,
						message: '请选择正确的出生日期',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					phone: [{
						required: true,
						type: "string",
						message: '请输入正确的手机号',
						regexp: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
				}
			}
		},
		methods: {

			changeTime(x) {
				this.form.date = x.result
				console.log(x)
			},
			changeSex(x) {
				console.log(x)
				this.form.sex = x[0].label
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						let pages = getCurrentPages();
						let nowPage = pages[pages.length - 1]; //当前页页面实例
						let prevPage = pages[pages.length - 2]; //上一页面
						prevPage.$vm.infoForm = this.form;
						uni.navigateBack({
							delta: 1
						});
					} else {
						console.log('验证失败');
						return
					}
				});

			}
		},

		computed: {

			// birthday: function() {
			// 	let item = this.form.date.result
			// 	return this.form.date.result
			// }
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.body {
		background-color: #FFFFFF;
	}

	.form {
		margin: 20px 20px 20px 20px;
		width: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
